<template>
    <div class="school">
        <div class="top-details">
            <img
                class="banner"
                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/20230802/5429e53e5d27b41c349488f65e60959b.png?x-oss-process=image/resize,m_lfit,w_1280/quality,q_90"
                alt=""
            />
            <div class="top-details-info">
                <div class="name">税务筹划实战运用课</div>
                <div class="vip">
                    <img
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/school-details-vipbj.png"
                        class="bj"
                        alt=""
                    />
                    <div class="moeny">
                        <span class="moeny-icon">￥</span>166
                        <span class="moeny-title">全站通会员专享</span>
                    </div>
                    <div class="num">共333300播放</div>
                </div>
                <div class="but">立即学习</div>
            </div>
        </div>
        <div class="tips">本课程支持以下设备听课</div>
        <div class="tabs">
            <div
                class="tab"
                :class="{ active: tabsIndex == 0 }"
                @click="changeTabs(0)"
            >
                课程介绍
            </div>
            <div
                class="tab"
                :class="{ active: tabsIndex == 1 }"
                @click="changeTabs(1)"
            >
                课程表
            </div>
        </div>

        <div v-show="tabsIndex == 0" class="tab-content tab0">111111111111</div>
        <div v-show="tabsIndex == 1" class="tab-content tab1">
            <div class="list">
                <div class="items">
                    税务筹划运用课-01
                    <div class="item">组织形式选择公司还是非公司</div>
                    <div class="item">组织形式选择公司还是非公司</div>
                </div>
                <div class="items">
                    税务筹划运用课-01
                    <div class="item">组织形式选择公司还是非公司</div>
                    <div class="item">组织形式选择公司还是非公司</div>
                </div>
            </div>
        </div>

        <el-dialog :visible.sync="dialogVisible" width="546px">
            <div slot="title"></div>
            <div class="pay">
                <div class="pay-info">
                    <div class="text">
                        <img
                            src="~/assets/images/school/school-details-dialog-icon1.png"
                            alt=""
                        />
                        <div>课程名称：税务筹划运用课税务筹划 运用课-01</div>
                    </div>
                    <div class="text">
                        <img
                            src="~/assets/images/school/school-details-dialog-icon2.png"
                            alt=""
                        />
                        <div>课程价格：<span>￥9999</span></div>
                    </div>
                    <div class="text" style="margin-bottom: 0">
                        <img
                            src="~/assets/images/school/school-details-dialog-icon3.png"
                            alt=""
                        />
                        <div>客服电话：010-123456</div>
                    </div>
                </div>
                <div class="pay-code">
                    <vue-qr
                        ref="qrCode"
                        :text="qrText"
                        :logoSrc="logoSrc"
                        :color-dark="randomColor"
                        :margin="0"
                        width="170"
                        height="170"
                    ></vue-qr>
                    <div class="checkbox">
                        <el-checkbox v-model="checked"></el-checkbox>
                        <div @click="goXieyi">《购买须知》</div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";

export default {
    components: {},
    head() {
        return {
            title: "小竹财税AI-商业合作-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹,财税,小竹财税,小竹智能GPT,小竹财税AI",
                },
            ],
        };
    },
    layout: "home",
    data() {
        return {
            tabsIndex: 0,

            dialogVisible: true,

            qrText: "11111111111111111",
            logoSrc: "",
            randomColor: "black",

            checked: false,
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    beforeMount() {
        this.$options.components["vue-qr"] = () => import("vue-qr");
    },
    mounted() {},
    methods: {
        changeTabs(index) {
            this.tabsIndex = index;
        },

        goXieyi() {
            window.open(
                "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/%E7%BD%91%E8%AF%BE%E8%B4%AD%E4%B9%B0%E9%A1%BB%E7%9F%A5.docx",
                "_blank"
            );
        },
    },
};
</script>

<style scoped lang="scss">
.school {
    width: 1200px;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
    margin: 16px auto;
    padding: 36px 116px;
}

.top-details {
    display: flex;
    justify-content: space-between;
    height: 272px;
    .banner {
        width: 433px;
        height: 272px;
        border-radius: 15px;
    }
}

.top-details-info {
    .name {
        font-weight: 700;
        font-size: 22px;
        color: #333333;
        padding: 8px 0 38px;
    }
    .vip {
        padding: 30px 31px 16px;
        position: relative;
        width: 488px;
        height: 155px;
        .bj {
            position: absolute;
            top: 0;
            left: 0;
            width: 488px;
            height: 155px;
            z-index: 1;
        }
        * {
            z-index: 2;
            position: relative;
        }
        .moeny {
            font-weight: 700;
            font-size: 28px;
            color: #d83e01;
            .moeny-icon {
                font-weight: 700;
                font-size: 20px;
                color: #d83e01;
            }
            .moeny-title {
                padding-left: 60px;
                font-weight: 700;
                font-size: 26px;
                color: #d83e01;
            }
        }
        .num {
            margin-top: 56px;
            font-weight: 500;
            font-size: 16px;
            color: #d83e01;
        }
    }
    .but {
        width: 148px;
        height: 46px;
        line-height: 46px;
        text-align: center;
        cursor: pointer;
        user-select: none;
        background: #f87c64;
        border-radius: 8px;
        font-weight: 500;
        font-size: 18px;
        color: #ffffff;
        margin-top: 30px;
        margin-left: 341px;
        &:hover {
            opacity: 0.8;
        }
        &:active {
            opacity: 0.9;
        }
    }
}

.tips {
    font-weight: 350;
    font-size: 14px;
    color: #999999;
    margin: 13px 0 0 207px;
}

.tabs {
    display: flex;
    align-items: center;
    height: 50px;
    border-radius: 6px;
    border: 1px solid #007ce2;
    margin-top: 28px;
    .tab {
        width: 50%;
        font-weight: 600;
        font-size: 20px;
        color: #333333;
        line-height: 48px;
        text-align: center;
        cursor: pointer;
    }
    .active {
        background-color: #007ce2 !important;
        color: #ffffff !important;
    }
}

.tab-content {
    background: rgba(216, 216, 216, 0.2);
}
.tab0 {
}
.tab1 {
    padding: 22px 58px;
    .list {
    }
    .items {
        font-weight: 600;
        font-size: 18px;
        color: #333333;
        margin-bottom: 12px;
    }
    .item {
        font-weight: 350;
        font-size: 16px;
        color: #333333;
        margin-top: 9px;
        margin-left: 37px;
        cursor: pointer;
        &:hover {
            color: #007ce2;
        }
    }
}

::v-deep .el-dialog__header {
    padding: 0;
    padding-top: 10px;
}

.pay {
    display: flex;
    justify-content: space-between;
    align-items: centere;
}

.pay-info {
    margin-right: 30px;
    .text {
        display: flex;
        margin-bottom: 25px;
        img {
            width: 16px;
            height: 16px;
            margin-right: 8px;
            position: relative;
            top: 7px;
        }
        div {
            font-weight: 600;
            font-size: 16px;
            color: #333333;
            line-height: 32px;
            span {
                font-weight: 700;
                // font-size: 22px;
                color: #f0635c;
            }
        }
    }
}

.pay-code {
    min-width: 170px;
    .checkbox {
        padding-top: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 12px;
        color: #007ce2;
        div {
            cursor: pointer;
        }
    }
}
</style>